<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <h1>公告管理</h1>
                <el-button type="primary" plain @click="dialogFormVisible = true" class="newAdd">+</el-button>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" border>
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="title" label="公告标题" width="140" show-overflow-tooltip />
                            <el-table-column prop="content" label="公告内容" show-overflow-tooltip />
                            <el-table-column prop="priority" label="公告权重" show-overflow-tooltip width="90px" />
                            <el-table-column prop="username" label="创建人员" show-overflow-tooltip />
                            <el-table-column prop="publishTime" label="创建时间" show-overflow-tooltip />
                            <el-table-column prop="delFlag" label="是否删除" show-overflow-tooltip width="80px" />
                            <el-table-column prop="deleteTime" label="删除时间" show-overflow-tooltip />

                            <el-table-column label="操作" show-overflow-tooltip width="140px">
                                <template #default="a">
                                    <el-button  type="primary" size="small" @click="handleClick(a.row)">
                                        编辑
                                    </el-button>
                                    <el-button type="primary" size="small" @click="del(a.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-container>
                </div>
            </el-main>

            <!-- 弹出框 添加 -->
            <el-dialog v-model="dialogFormVisible" title="添加公告">
                <el-form :model="form">
                    <el-form-item label="公告标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off" placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="公告内容" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.content" placeholder="请输入公告内容" />
                    </el-form-item>
                    <el-form-item label="公告权重" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.priority" placeholder="权重1最高往后递减" />
                    </el-form-item>
                    <el-form-item label="发布人员" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.username" disabled />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="add">
                            添加
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 弹出框 修改 -->
            <el-dialog v-model="dialogFormVisible2" title="修改公告">
                <el-form :model="form">
                    <el-form-item label="公告标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off" placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="公告内容" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.content" placeholder="请输入公告内容" />
                    </el-form-item>
                    <el-form-item label="公告权重" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.priority" placeholder="权重1最高往后递减" />
                    </el-form-item>
                    <el-form-item label="是否删除" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.delFlag" placeholder="已删1 未删0" />
                    </el-form-item>
                    <el-form-item label="发布人员" :label-width="formLabelWidth">
                        <el-input theme="snow" v-model="form.username" disabled />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancle">取消</el-button>
                        <el-button type="primary" @click="confirmEdit">
                            修改
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-container>

    </div>


</template>

<script>
    import { ElMessage } from 'element-plus'
    import { ElMessageBox } from 'element-plus'
    import { ElTable } from 'element-plus'
    import { reactive, ref } from 'vue'
    export default {
        name: 'VueWithdrawal',

        data() {
            return {
                tableData: [],
                cxlist: { currentPage: 1, pageSize: 2, count: 0 },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '140px',
                form: {
                    title: '',
                    content: '',
                    priority: '',
                    username: window.sessionStorage.getItem("username"),
                    publishTime: '',
                    delFlag:'',
                    id:''
                },
                dialogFormVisible2:false
            };
        },

        mounted() {
            this.cx();
        },

        methods: {
            cancle(){
                this.dialogFormVisible2 = false
                this.dialogFormVisible = false
                this.form.title= ''
                this.form.content=''
                this.form.priority= ''
                this.form.delFlag= ''
            },
            handleSizeChange() {
                this.cx();
            },
            handleCurrentChange() {
                this.cx();
            },
            add() {
                var that = this;
                ElMessageBox.confirm(
                    '确定添加？',
                    "Warning",
                    {
                        confirmButtonText: '添加',
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(() => {
                    var url = "announcement/add";
                    that.$http.post(url, that.form)
                        .then((result) => {
                            that.tableData = result.announcementDOList.map(item => {
                                item = {
                                    ...item,
                                    delFlag: item.delFlag == "1" ? "已删除" : "未删除"
                                }
                                return item;
                            })
                        }).catch((err) => {

                        });
                    that.dialogFormVisible = false;
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消添加',
                        })
                    })
            },
            cx() {
                var url = 'announcement/getAll';
                var that = this;
                this.$http.get(url)
                    .then((result) => {
                        that.tableData = result.announcementDOList.map(item => {
                            item = {
                                ...item,
                                delFlag: item.delFlag == "1" ? "已删除" : "未删除"
                            }
                            return item;
                        })
                    }).catch((err) => {

                    });
            },
            del(a) {
                ElMessageBox.confirm(
                    '确定删除吗？',
                    "Warning",
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(() => {
                    var that = this;
                    that.$http.get('/announcement/' + a.id)
                        .then((result) => {
                            that.tableData = result.announcementDOList.map(item => {
                                item = {
                                    ...item,
                                    delFlag: item.delFlag == "1" ? "已删除" : "未删除"
                                }
                                return item;
                            })
                        }).catch((err) => {

                        });
                })

            },
            handleClick(a){
                this.dialogFormVisible2 = true;
                this.form.title= a.title;
                this.form.content= a.content;
                this.form.id= a.id;
                this.form.publishTime=a.publishTime;
                this.form.username= window.sessionStorage.getItem("username")
            },
            confirmEdit(){
                ElMessageBox.confirm(
                    '确定修改吗？',
                    "Warning",
                    {
                        confirmButtonText: '修改',
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(() => {
                    var that = this;
                    that.$http.post('/announcement/update',that.form)
                        .then((result) => {
                            console.log(result,"111");
                            that.tableData = result.announcementDOList.map(item => {
                                item = {
                                    ...item,
                                    delFlag: item.delFlag == "1" ? "已删除" : "未删除"
                                }
                                return item;
                            })
                            that.cancle();
                        }).catch((err) => {

                        });
                })
            }

        },
        components: {
        },


    };
</script>

<style lang="css" scoped>
    h1 {
        font-size: 30px;
        font-weight: 600;
        font-family: "微软雅黑";
        color: rgb(73, 72, 72);
    }

    .newAdd {
        position: absolute;
        z-index: 2;
        top: 96px;
        left: 400px;
        font-weight: 600;

    }

    .el-main {
        overflow: hidden;
    }

    .el-button--text {
        margin-right: 15px;
    }

    .el-select {
        width: 300px;
    }

    .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }



    .el-dialog {
        width: 100%;
        background-color: red;
    }

    .ql-toolbar {
        width: 500px !important;
    }



    .el-main {
        padding: 0 !important;
    }

    .bar {
        height: 60px;
        line-height: 60px;
    }

    .el-header {
        height: 50px;
        padding-left: 0;

    }


    .el-aside {
        overflow: hidden;
    }

    .el-form-item {
        margin-right: 10px;
    }

    .flex {
        margin-top: 20px;
    }

    /* 下方数据 */
    .bottom-header {
        height: 370px;

    }

    .el-table {
        margin-top: 20px;
        box-shadow: 0 0 5px rgb(195, 206, 217);
    }

    .bottom-bar {
        border-top: 1px solid silver;
        height: 100%;
    }

    .el-pagination {
        float: left;
        margin-top: 10px;
    }

    .bottom-bar>span {
        margin-top: 16px;
        display: inline-block;

    }

    .delete {
        height: 33px;
        width: 60px;
        border: none;
        color: #fff;
        border-radius: 5px;
        background-color: red;
        cursor: pointer;
    }

    .delete:hover {
        background-color: rgb(242, 85, 85);
    }
</style>